<template>
  <div>
    <div class="bjtk xzgj_bjtk">
      <div class="bjtk_list ">
        <div class="bj">
           <div class="close" @click="close">
             <a-icon type="close" />
            </div>
              <div class="list">
            <span class="tit_p">
            公司名称：
            </span>
            <a-input  style="width:80%" disabled v-model="dwmc" allow-clear  />
          </div>
          
          <div class="list">
            <span class="tit_p">
              <span style="color:red">*</span>跟进日期：
            </span>
            <a-date-picker
              show-time
              format="YYYY-MM-DD "
              :defaultValue="moment(gjrq, 'YYYY-MM-DD')"
              style="width:80%"
              @change="onGjrqTimeChange"
            />
          </div>
          <div class="list">
            <span class="tit_p">
              <span style="color:red">*</span>联&nbsp;系
              <span style="display:inline-block;width:10px"></span>人：
            </span>
            <a-select v-model="lxr_val" style="width:80%" @change="handLxrChange">
              <a-select-option :value="lxr" v-for="(lxr,i) in lxrList " :key="i">{{lxr}}</a-select-option>
            </a-select>
          </div>
          <div class="list">
            <span class="tit_p">
              <span style="color:red;width:5px;display:inline-block;">*</span>跟进详情：
            </span>
            <a-textarea class="gjxq_area" placeholder="请输入跟进详情" v-model="gjxq" allow-clear  />
          </div>
          <!-- <div class="list">
            <span class="tit_p">
              <span style="color:red">*</span>所在位置：
            </span>
            <a-select v-model="lxr_val" style="width:80%" @change="handLxrChange">
              <a-select-option :value="lxr" v-for="(lxr,i) in lxrList " :key="i">{{lxr}}</a-select-option>
            </a-select>
          </div> -->
          <!-- img_list -->
          <div class="list">
            <span class="tit_p">关联图片：</span>
            <div class="up_img">
              <a-upload
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
              >
                <div v-if="fileList.length < 2">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
            </div>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </div>
        <div class="list_btn">
            <a-button class="add_new_btn"  @click="xzlxrLink()">新增联系人</a-button>
            <a-button type="primary" style="width: 130px" @click="SvaeXzgenjin()">提交并保存</a-button>
          </div>
          <div class="bcloading" v-if="isSave">
            <a-spin size="large" tip="正在保存..."></a-spin>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import moment from "moment";
export default {
  data() {
    return {
      moment,
      // 跳转携带参数信息
      xsdinfo: "",
      // 销售单号
      xsdh: "",
      // 单位名称
      dwmc: "",
      // 公司编码
      gsbm: "",
      // 授权id
      sqdwid: "",
      //数据库名称
      database: "ERP2_BEARING",
      // ip地址
      ip: "122.112.240.180",
      // 跟进详情
      gjxq: "",
      gjrq: new Date(),
      // 联系人默认值
      lxr_val: "",
      // 联系人列表
      lxrList: [],
      // 当前行数据
      // 获取位置
      addRessName: "",
      genjinInfo: "",
      // 图片数组
      fileList: [],
      // 传参数组
      pic: [],
      // 控制预览图
      previewVisible: false,
      // 预览图片地址
      previewImage: "",
      // 控制保存成功
      isSave: false
    };
  },

  methods: {
    //关闭弹出框
    close() {
      this.$store.state.tjwz = false;
    },
    // 保存
    SvaeXzgenjin() {
      var myDate = new Date();
      var hours = myDate.getHours();
      var minutes = myDate.getMinutes();
      var seconds = myDate.getSeconds();
      if (this.dwmc == "" || this.lxr_val == "" || this.gjxq == "") {
        this.$notification["error"]({
          message: "警告",
          description: "请完善信息"
        });
      } else {
        this.isSave = true;
        // 保存已经上传的图片的base码
        for (var i = 0; i < this.fileList.length; i++) {
          this.pic.push(this.fileList[i].thumbUrl);
        }
        console.log(this.pic);
        // 新增跟进保存
        this.axios
          .post(
            "https://yb.bearing.cn/wxapi/smt_newVisitAdd.php",
            qs.stringify({
              dwmc: this.dwmc,
              // zdr:sessionStorage.getItem('lxr'),
              zdr: "修改测试",
              lxr: this.lxr_val,
              lxrq: this.gjrq,
              lxnr1: this.gjxq,
              lxnr2: this.addRessName,
              // lxnr3: that.data.imgStr != undefined ? that.data.imgStr + "," : '',
              lxnr3: "",
              pic: this.pic,
              gsbm: this.gsbm,
              vison: this.vison,
              database: this.database,
              IP: this.ip
            })
          )
          .then(res => {
            this.isSave = false;
            if (res.data.code == 103 || res.data.code == 102) {
              this.$notification["success"]({
                message: "成功",
                description: "运单保存成功"
              });
              this.$parent.handleChangelist(this.$parent.pagination)
              this.close();
            }
          });
      }
    },
    // 新增联系人弹框
    xzlxrLink() {
      this.$store.state.tjwz = false;
      this.$store.state.jsgl = true;
    },
    // 退出预览图片
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      // if (!file.url && !file.preview) {
      //     file.preview = await getBase64(file.originFileObj);
      // }
      console.log(file.thumbUrl);
      this.previewImage = file.thumbUrl || file.preview;
      this.previewVisible = true;
    },
    //图片数组改变
    handleChange({ fileList }) {
      this.fileList = fileList;
      console.log(this.fileList);
    },
    // 跟进详情
    // onGjxqChange(e) {
    //   this.gjxq = e.target.value;
    // },
    // 跟进日期
    onGjrqTimeChange(date, dateString) {
      this.gjrq = dateString;
      console.log(this.gjrq);
    },
    // 联系人更改触发
    handLxrChange(value) {
      this.lxr_val = value;
    },
    // 获取联系人列表
    getLxrList() {
      this.axios
        .post(
          "https://yb.bearing.cn/wxapi/smt_newLxrAddList.php",
          qs.stringify({
            gsbm: this.gsbm,
            dwmc: this.genjinInfo.DWMC,
            token:sessionStorage.getItem('smt_token'),
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 103) {
            for (var ii = 0; ii < res.data.result.length; ii++) {
              this.lxrList.push(res.data.result[ii].lxr);
            }
            console.log(this.lxrList);
          }
        });
    }
  },
  created() {
    this.gsbm = sessionStorage.getItem("gsbm");
    this.genjinInfo = JSON.parse(sessionStorage.getItem("genjinInfo"));
    this.dwmc = this.genjinInfo.DWMC;
    this.getLxrList();
  }
};
</script>

<style lang='less' >
.xzgj_bjtk {
  // position: absolute;
  // z-index: 9999;
  // width: 55%;
  // height: 550px;
  // background-color: #fff;
  // text-align: center;
  // padding: 20px;
  // // top: 10%!important;
  // left: 50%;
  // transform: translateX(-50%);
  .topList{
    text-align: left;
    padding-left: 30px;
  }
  .bjtk_list {
    position: relative;
    top:77px;
    .close{
      top: -90px;
      right: -20px;
    }
    .head {
      display: flex;
      justify-content: space-between;
    }
    .bj {
      
      .dwmc_tit {
        text-align: left;
        margin-left: 28px;
        color: #000;
      }
      .ts {
        margin: 5px 0 0 75px;
        color: red;
        font-size: 12px;
        i {
          margin: 0 5px;
        }
      }
      .dwmc_tit {
      }
      .list {
        margin: 25px 0;
        // display: flex;
        display: block;
        align-items: center;
        text-align: left;
        .tit_p {
          display: inline-block;
          width: 100px;
          text-align: right;
          margin-right: 20px;
        }
        .gjxq_area {
          width: 80%;
          margin-top: 15px;
          min-height: 50px;
          // vertical-align: middle;
        }
        .cz_btn {
          display: block;
          width: 25%;
        }
        .tit {
          display: inline-block;
          width: 80px;
          text-align: right;

          i {
            color: #ff0000;
            padding: 0 4px;
          }
        }

        .radio {
          margin-left: 10px;
        }

        .text {
          width: 288px;
          vertical-align: top;
        }
      }
      .list {
        margin: 0!important;
        // margin-left: 90px;
        // overflow: hidden;
        text-align: left;
        display: block;
        text-align: left;
        .up_img {
          display: inline-block;
          width: 260px;
          vertical-align: text-top;
        }
        .tit_p {
          display: inline-block;
          width: 100px;
        }
      }
    }
     .bcloading {
        position: relative;
        left: 42%;
        bottom: 214px;
      }
      .list_btn {
        text-align: center;
        position: relative;
        bottom: 0;
        button {
          width: 200px;
          height: 40px;
        }
        .add_new_btn {
          width: 130px;
          margin-right: 20px;
          background: #1dd0f9;
          color: #fff;
          border: 1px solid #1dd0f9;
        }
      }
  }
}
</style>
